<template>
  <div class="wrapper">
    <ul>
      <div class="item-container" tag="li" @click="handleItemClick(item.postId)" v-for="item of list" :key="item.postId">
        <div class="item-author-date">
          <img :src="item.avatar" class="item-author">
          <span class="item-date">{{item.date}}</span>
        </div>
        <div class="item-title">{{item.title}}</div>
        <div class="item-image-wrapper">
          <img :src="item.imgSrc" class="item-image">
        </div>
        <div class="item-content">{{item.content}}</div>
        <div class="item-like">
          <span class="iconfont item-like-image">&#xe657;</span>
          <span class="item-like-font">{{item.collection}}</span>
          <span class="iconfont item-like-image">&#xe633;</span>
          <span class="item-like-font">{{item.reading}}</span>
        </div>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'NewsItem',
  props: {
    list: Array
  },
  data () {
    return {
      detailInfo: ''
    }
  },
  methods: {
    handleItemClick (id) {
      this.detailInfo = this.list[id]
      this.$router.push({path: `/detail/${id}`, query: {detailInfo: this.detailInfo}})
      this.showHeadBack()
    },
    showHeadBack () {
      this.$store.dispatch('showHeadBack', 1)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper
    margin-bottom: 44px
    .item-container
      margin-top: 1px
      margin-bottom: 3px
      background-color: #fff
      border-bottom: 1px solid #ededed
      border-top: 1px solid #ededed
      padding-bottom: 5px
      .item-author-date
        margin: 5px 0 10px 5px
        .item-author
          width: 30px
          height: 30px
          vertical-align: middle
        .item-date
          margin-left: 10px
          vertical-align: middle
          margin-bottom: 5px
          font-size: 13px
      .item-title
        font-size: 17px
        font-weight: 600
        color: #333
        margin: 0 0 10px 10px
      .item-image-wrapper
        margin-bottom: 5px
        overflow: hidden
        height: 0
        padding-bottom: 61%
        .item-image
          width: 100%
      .item-content
        color: #666
        font-size: 14px
        margin-bottom: 10px
        margin-left: 10px
        letter-spacing: 1px
        line-height: 20px
      .item-like
        font-size: 13px
        line-height: 16px
        margin-left: 10px
        .item-like-image
          font-size: .4rem
          margin-right: 8px
          vertical-align: middle
        .item-like-font
          vertical-align: middle
          margin-right:20px
</style>
